<template>
  <div class="goTop">
    <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" router background-color="#00c3ff" text-color="#fff" active-text-color="#ff3">
      <el-menu-item><span>云N记</span></el-menu-item>
      <el-menu-item index="/index"><i :style="{ color: iconColor }" class="el-icon-s-home"></i>主页</el-menu-item>
      <el-menu-item index="/publish"><i :style="{ color: iconColor }" class="el-icon-cloudy"></i>发布云记</el-menu-item>
      <el-menu-item index="/category_manager"><i :style="{ color: iconColor }" class="el-icon-setting"></i>类别管理</el-menu-item>
      <el-menu-item index="/user/center"><i :style="{ color: iconColor }" class="el-icon-user"></i>个人中心</el-menu-item>
      <el-menu-item index="/data/report"><i :style="{ color: iconColor }" class="el-icon-s-data"></i>数据报表</el-menu-item>
      <el-menu-item index="/center/like"><font-awesome-icon :icon="['far', 'heart']" style="width: 18px;height: 18px;margin-right: 6px"></font-awesome-icon>关注</el-menu-item>
      <el-menu-item index="7">
        <i :style="{ color: iconColor }" class="el-icon-chat-line-round"></i>消息
        <el-badge :value="200" :max="99">
          <!--<el-button size="small">评论</el-button>-->
        </el-badge>
      </el-menu-item>
      <!--搜索与添加区域-->
      <el-menu-item class="search-input" style="margin-left: 7px">
        <el-input placeholder="请输入内容" @clear="search()" v-model="queryInfo.query" clearable>
          <el-button slot="append" @click="search()" icon="el-icon-search" title="搜索"></el-button>
        </el-input>
      </el-menu-item>
      <!--头像区-->
      <router-link :to="{ name: 'login'}">
        <el-avatar title="我的头像" class="home-user-header" :size="50" :src="userHeadImg"></el-avatar>
      </router-link>
      <!--<a href="/page_of_login">-->
      <!--  -->
      <!--</a>-->
    </el-menu>
    <!--模块区域-->
    <router-view @func="getUserFormSon"></router-view>
    <!--一键返回顶部-->
    <div>
      <el-backtop target=".goTop">
        <!--<i class="el-icon-caret-top"></i>-->
        <svg t="1628568537298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5344" width="200" height="200">
          <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#3AD0F9" p-id="5345"></path>
          <path d="M637.6 492s65.6 13.6 65.6 72c0 28.8-7.2 54.4-14.4 72.8-8 20-16.8 16-20.8-3.2-5.6-24-17.6-52-43.2-57.6M376 492s-65.6 13.6-65.6 72c0 28.8 7.2 54.4 14.4 72.8 8 20 16.8 16 20.8-3.2 5.6-24 17.6-52 43.2-57.6" fill="#F74541" p-id="5346"></path>
          <path
            d="M678.4 656h-0.8c-8-0.8-13.6-8-17.6-22.4-4.8-20.8-16-46.4-37.6-51.2-4-0.8-7.2-5.6-6.4-9.6 0.8-4 5.6-7.2 9.6-5.6 24 5.6 40.8 27.2 49.6 62.4 0.8 4 2.4 7.2 3.2 8.8l3.2-6.4c9.6-23.2 14.4-46.4 14.4-68.8 0-51.2-59.2-63.2-60-63.2-4-0.8-7.2-4.8-6.4-9.6 0.8-4 4.8-7.2 9.6-6.4 24.8 4.8 72.8 28 72.8 79.2 0 24.8-4.8 49.6-15.2 75.2-1.6 4-7.2 17.6-18.4 17.6z"
            fill="#A03513"
            p-id="5347"
          ></path>
          <path
            d="M424 718.4c0 17.6 11.2 33.6 24 33.6s16 12.8 16 30.4v73.6c0 17.6 11.2 32 24 32s24-14.4 24-32V775.2c0-17.6 11.2-32 24-32s23.2 10.4 23.2 23.2c0 12.8 12 26.4 24.8 26.4s24-17.6 24-35.2V561.6c0-17.6-12-32-24-32-12.8 0-23.2 13.6-23.2 30.4 0 16.8-11.2 30.4-24 30.4s-24 14.4-24 32V688c0 17.6-11.2 32-24 32s-24-14.4-24-32V584c0-17.6-7.2-32-20-32S424 566.4 424 584v134.4z"
            fill="#FFFFFF"
            p-id="5348"
          ></path>
          <path d="M652 376c0-168-140.8-274.4-140.8-274.4S369.6 208.8 369.6 376c0 50.4 12 169.6 16.8 189.6 4.8 20 50.4 60 124 60s119.2-40 124-59.2c5.6-19.2 17.6-139.2 17.6-190.4z" fill="#F74541" p-id="5349"></path>
          <path d="M510.4 333.6m-61.6 0a61.6 61.6 0 1 0 123.2 0 61.6 61.6 0 1 0-123.2 0Z" fill="#3AD0F9" p-id="5350"></path>
          <path d="M510.4 300.8c28 0 52 19.2 59.2 45.6 1.6-4.8 2.4-10.4 2.4-16 0-33.6-27.2-61.6-61.6-61.6-33.6 0-61.6 27.2-61.6 61.6 0 5.6 0.8 11.2 2.4 16 7.2-26.4 30.4-45.6 59.2-45.6z" fill="#00B3F9" p-id="5351"></path>
          <path d="M512 408c-40 0-72-32-72-72s32-72 72-72 72 32 72 72-32 72-72 72z m0-127.2c-30.4 0-55.2 24.8-55.2 55.2 0 30.4 24.8 55.2 55.2 55.2 30.4 0 55.2-24.8 55.2-55.2 0-30.4-24.8-55.2-55.2-55.2z" fill="#A03513" p-id="5352"></path>
          <path d="M511.2 184c24 0 46.4-4.8 67.2-13.6-34.4-45.6-67.2-71.2-67.2-71.2s-33.6 25.6-67.2 71.2c20 8.8 43.2 13.6 67.2 13.6z" fill="#FFFFFF" p-id="5353"></path>
          <path d="M648 433.6c-5.6 21.6-56 65.6-137.6 65.6s-132-44.8-137.6-66.4c-0.8-1.6-0.8-4-1.6-7.2 4 55.2 11.2 123.2 14.4 137.6 4.8 20 50.4 60 124 60s119.2-40 124-59.2c4-14.4 11.2-82.4 14.4-137.6 0.8 3.2 0.8 5.6 0 7.2z" fill="#A81000" opacity=".3" p-id="5354"></path>
          <path d="M296 352c0-8.8-10.4-16-24-16H160.8c-13.6 0-24.8 7.2-24.8 16s-4.8 16-16 16-24 8-24 16c0 8.8 10.4 16 24 16h83.2c13.6 0 20.8-7.2 20.8-16s10.4-16 24-16h24c13.6 0 24-7.2 24-16z" fill="#FFFFFF" p-id="5355"></path>
          <path
            d="M508 632c-76 0-124.8-42.4-131.2-65.6-4.8-21.6-16.8-140-16.8-191.2 0-169.6 137.6-275.2 143.2-280 3.2-2.4 6.4-2.4 9.6 0 5.6 4.8 143.2 110.4 143.2 280 0 48.8-11.2 170.4-16.8 192-6.4 23.2-56 64.8-131.2 64.8z m0-520C484 132.8 376 231.2 376 375.2c0 48.8 12 167.2 16.8 187.2 4 15.2 44.8 53.6 115.2 53.6s112-38.4 116-52.8c4.8-18.4 16.8-137.6 16.8-187.2-0.8-144.8-108.8-243.2-132.8-264z"
            fill="#A03513"
            p-id="5356"
          ></path>
          <path
            d="M336.8 656c-10.4 0-16-13.6-17.6-18.4-9.6-25.6-14.4-50.4-14.4-75.2 0-51.2 46.4-73.6 71.2-79.2 4-0.8 8 1.6 9.6 6.4 0.8 4-1.6 8.8-6.4 9.6-4 0.8-59.2 12.8-59.2 64 0 28 7.2 52.8 13.6 68.8 0.8 3.2 2.4 4.8 3.2 6.4 0.8-1.6 1.6-4 3.2-8.8 8.8-36 25.6-57.6 48.8-62.4 4-0.8 8.8 1.6 9.6 5.6 0.8 4-1.6 8.8-5.6 9.6-21.6 4.8-32 30.4-36.8 51.2-3.2 14.4-8.8 21.6-16.8 22.4h-2.4z"
            fill="#A03513"
            p-id="5357"
          ></path>
          <path
            d="M1001.6 652.8c-15.2-11.2-33.6-17.6-53.6-17.6-51.2 0-92 40.8-92 92 0 4.8 0.8 9.6 1.6 14.4-7.2-1.6-13.6-2.4-21.6-2.4-48 0-88 37.6-92 84.8-8.8-3.2-18.4-4.8-28-4.8-29.6 0-56.8 14.4-73.6 36.8-16-26.4-45.6-44.8-78.4-44.8-35.2 0-65.6 20-81.6 48.8-16.8-15.2-38.4-24.8-62.4-24.8-16 0-31.2 4-44.8 11.2-4-46.4-44-83.2-91.2-83.2-16 0-31.2 4-44 11.2v-7.2c0-51.2-40.8-92-92-92-45.6 0-83.2 33.6-90.4 76.8 86.4 161.6 256 272 452 272 110.4 0 212.8-35.2 296.8-94.4 0.8-3.2 1.6-7.2 1.6-10.4l9.6 2.4c88-66.4 153.6-160.8 184-268.8z"
            fill="#FFFFFF"
            p-id="5358"
          ></path>
          <path d="M512.8 576c-51.2 0-100.8-21.6-137.6-60-3.2-3.2-3.2-8 0-11.2 3.2-3.2 8-3.2 11.2 0 34.4 35.2 79.2 55.2 126.4 55.2 44.8 0 88-17.6 120.8-49.6 3.2-3.2 8-3.2 11.2 0 3.2 3.2 3.2 8 0 11.2-36 35.2-83.2 54.4-132 54.4z" fill="#A03513" p-id="5359"></path>
          <path
            d="M52 739.2c4 8 8 16 12.8 24C65.6 717.6 106.4 680 152 680c46.4 0 80 39.2 80 85.6v7.2c0 3.2 0.8 5.6 4 7.2 2.4 1.6 5.6 1.6 8 0C256 773.6 273.6 768 288 768c44 0 76 35.2 80 79.2 0 2.4 1.6 4.8 4 6.4 2.4 1.6 5.6 1.6 8 0 12-7.2 30.4-13.6 44-13.6 21.6 0 37.6 11.2 53.6 25.6 1.6 1.6 4 2.4 6.4 2.4 2.4-0.8 4.8-1.6 5.6-4 14.4-28 47.2-48 77.6-48 29.6 0 52.8 17.6 68 44 1.6 2.4 4 4 6.4 4 2.4 0 4.8-0.8 6.4-3.2 16-21.6 36-36 62.4-36 16 0 21.6 4 30.4 6.4 2.4 0.8 4.8 0 7.2-0.8 2.4-1.6 3.2-4 3.2-6.4 4-50.4 51.2-88 103.2-76 2.4 0.8 5.6 0 7.2-1.6 1.6-1.6 3.2-4.8 2.4-7.2-0.8-4.8-0.8-9.6-0.8-13.6 0-47.2 37.6-84.8 84-84.8 19.2 0 37.6 6.4 51.2 17.6l4.8-16.8c-16-11.2-35.2-17.6-56-17.6-55.2 0-100 45.6-100 101.6v2.4c-56 0-100.8 33.6-110.4 84.8-7.2-1.6-18.4-4.8-25.6-4.8-28 0-49.6 13.6-68.8 34.4-19.2-24.8-44-42.4-75.2-42.4-33.6 0-68.8 19.2-87.2 47.2-17.6-13.6-35.2-23.2-56.8-23.2-12.8 0-29.6 4.8-41.6 10.4C372.8 787.2 336 752 288 752c-12 0-28.8 4-40 8.8-2.4-53.6-46.4-96-100-96-45.6 0-84.8 31.2-96 74.4z"
            fill="#0C508E"
            p-id="5360"
          ></path>
          <path
            d="M1000 658.4c-33.6 9.6-59.2 41.6-59.2 78.4v4.8c-17.6 9.6-32 24.8-38.4 44-36.8 8-64.8 40.8-64.8 80 0 4.8 0.8 9.6 1.6 13.6-6.4-1.6-12.8-2.4-19.2-2.4-31.2 0-58.4 17.6-72 43.2-12.8-8-28-16-44-16-40 0-73.6 32.8-80.8 71.2-10.4-4.8-19.2-7.2-31.2-7.2-19.2 0-38.4 6.4-52 16.8-10.4-32.8-39.2-56.8-76-56.8-28.8 0-56 14.4-71.2 36.8-13.6-27.2-40.8-45.6-73.6-45.6-7.2 0-14.4 0.8-20.8 3.2 0.8-4 0.8-7.2 0.8-11.2 0-44.8-36.8-81.6-81.6-81.6-7.2 0-14.4 0.8-20.8 2.4v-4.8c0-44.8-40-83.2-85.6-83.2-19.2 0-33.6 8.8-48 20C152 919.2 318.4 1024 509.6 1024c232 0 428-154.4 490.4-365.6z"
            fill="#E4F5F9"
            p-id="5361"
          ></path>
          <path
            d="M680 595.2h-0.8c-4-0.8-7.2-4.8-7.2-8.8 5.6-44-16.8-56-17.6-56.8-4-2.4-5.6-7.2-3.2-10.4 2.4-4 6.4-5.6 10.4-3.2 1.6 0.8 32.8 16.8 26.4 72.8 0 3.2-4 6.4-8 6.4zM620 448s-0.8 0 0 0c-5.6-0.8-9.6-4-8.8-8.8 0-0.8 6.4-65.6 0-119.2-1.6-11.2-4.8-24-10.4-36.8-1.6-4 0.8-8.8 5.6-10.4 4.8-1.6 9.6 0.8 12 4.8 6.4 14.4 10.4 28 11.2 40.8 6.4 55.2 0 120 0 122.4-0.8 4-4.8 7.2-9.6 7.2zM592 256c-2.4 0-5.6-1.6-6.4-4-12-22.4-23.2-37.6-24-37.6-2.4-3.2-2.4-8.8 0.8-12 3.2-3.2 8-2.4 11.2 0.8 0.8 0.8 12.8 16.8 25.6 40 2.4 4 0.8 8.8-3.2 11.2-0.8 1.6-2.4 1.6-4 1.6zM401.6 416.8c-4 0-8-3.2-8-7.2-4.8-72.8 6.4-99.2 6.4-100.8 1.6-4 6.4-5.6 11.2-4 4 1.6 6.4 6.4 4.8 10.4 0 0.8-10.4 25.6-5.6 93.6 0 4-4 8-8.8 8zM333.6 583.2c-4 0-8-3.2-8-7.2-3.2-41.6 28-59.2 29.6-60 4-2.4 8.8-0.8 11.2 3.2 2.4 4 0.8 8.8-3.2 11.2-0.8 0.8-24 13.6-21.6 44.8 0 4-3.2 7.2-8 8 0.8 0 0 0 0 0z"
            fill="#FFFFFF"
            opacity=".5"
            p-id="5362"
          ></path>
          <path d="M504.8 376c-4.8 0-8-3.2-8.8-8 0-4.8 3.2-8 8-8.8 30.4-1.6 31.2-22.4 31.2-23.2 0-4.8 4-8 8.8-8 4.8 0 8.8 4 8.8 8-0.8 12.8-10.4 38.4-48 40z" fill="#FFFFFF" p-id="5363"></path>
          <path d="M516 600c-63.2 0-112-32.8-112.8-33.6-4-2.4-4.8-7.2-2.4-11.2 2.4-4 7.2-4.8 11.2-2.4 4 2.4 97.6 65.6 192 4 4-2.4 8.8-1.6 11.2 2.4 2.4 4 1.6 8.8-2.4 11.2-32.8 22.4-66.4 29.6-96.8 29.6z" fill="#FFFFFF" opacity=".5" p-id="5364"></path>
          <path
            d="M296 216c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z m0-48.8c-9.6 0-16.8 8-16.8 16.8 0 9.6 8 16.8 16.8 16.8 9.6 0 16.8-8 16.8-16.8 0-9.6-7.2-16.8-16.8-16.8zM872 384c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z m0-48.8c-9.6 0-16.8 8-16.8 16.8 0 9.6 8 16.8 16.8 16.8 9.6 0 16.8-8 16.8-16.8 0-9.6-7.2-16.8-16.8-16.8zM882.4 517.6c0-3.2-3.2-6.4-8-7.2l-15.2-2.4c-4-0.8-8.8-4.8-8.8-8.8l-2.4-15.2c-0.8-4-4-8-7.2-8s-6.4 3.2-7.2 8l-2.4 15.2c-0.8 4-4.8 8.8-8.8 8.8l-15.2 2.4c-4 0.8-8 4-8 7.2s3.2 6.4 8 7.2l15.2 2.4c4 0.8 8.8 4.8 8.8 8.8l2.4 15.2c0.8 4 4 8 7.2 8s6.4-3.2 7.2-8l2.4-16.8c0.8-4 4.8-8 8.8-8.8l14.4-0.8c4.8-1.6 8.8-4 8.8-7.2zM798.4 196c0-3.2-3.2-6.4-8-7.2l-14.4-2.4c-4-0.8-8.8-4.8-8.8-8.8l-2.4-15.2c-0.8-4-4-8-7.2-8s-6.4 3.2-7.2 8l-2.4 15.2c-0.8 4-4.8 8.8-8.8 8.8l-15.2 2.4c-4 0.8-8 4-8 7.2s3.2 6.4 8 7.2l15.2 2.4c4 0.8 8.8 4.8 8.8 8.8l2.4 15.2c0.8 4 4 8 7.2 8s6.4-3.2 7.2-8l2.4-16.8c0.8-4 4.8-8 8.8-8.8l14.4-0.8c4.8-1.6 8-4 8-7.2zM198.4 552.8c0-3.2-3.2-6.4-8-7.2L176 544c-4-0.8-8.8-4.8-8.8-8.8l-2.4-15.2c-0.8-4-4-8-7.2-8s-6.4 3.2-7.2 8l-2.4 15.2c-0.8 4-4.8 8.8-8.8 8.8l-15.2 2.4c-4 0.8-8 4-8 7.2s3.2 6.4 8 7.2l15.2 2.4c4 0.8 8.8 4.8 8.8 8.8l2.4 15.2c0.8 4 4 8 7.2 8s6.4-3.2 7.2-8l2.4-16.8c0.8-4 4.8-8 8.8-8.8l14.4-0.8c4.8-1.6 8-4.8 8-8z"
            fill="#FFFFFF"
            p-id="5365"
          ></path>
        </svg>
      </el-backtop>
    </div>
  </div>
</template>

<script>
export default {
  name: 'headNavMenu',
  data () {
    return {
      userHeadImg: '',
      iconColor: '#FFF',
      activeIndex: '1',
      activeIndex2: '1',
      queryInfo: {
        query: ''
      }
    }
  },
  created () {
    this.$memory.getUser().then(userString => {
      if (userString === null) {
        this.userHeadImg = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      }
      var user = JSON.parse(userString)
      console.log(user)
      this.userHeadImg = user.headimg
      // console.log(user)
    })
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    // 拿到子组件传递过来的参数
    getUserFormSon (data) {
      this.user = data
      console.log(this.user)
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 搜索框
    search () {}
  },

  components: {}
}
</script>

<style lang="less" scoped>
.el-menu {
  top: 20px;
}
span {
  font-size: 40px;
  font-family: 'Times New Roman', Times, serif;
}
.el-badge{
  position: relative;
  bottom: 15%;
}
.home-user-header {
  margin: 5px 0 0 30px;
}
.goTop {
  margin-top: -2.5vh;
  height: 100vh;
  overflow-x: hidden;
}
</style>
